<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务步骤API测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .result { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 3px; }
        .error { background: #ffebee; color: #c62828; }
        .success { background: #e8f5e8; color: #2e7d32; }
        button { padding: 8px 16px; margin: 5px; background: #1976d2; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background: #1565c0; }
        input { padding: 8px; margin: 5px; border: 1px solid #ddd; border-radius: 3px; width: 200px; }
    </style>
</head>
<body>
    <h1>任务步骤API测试页面</h1>
    
    <div class="test-section">
        <h3>测试获取任务步骤树</h3>
        <input type="number" id="taskId" placeholder="输入任务ID" value="1">
        <button onclick="testGetTaskStepsTree()">获取步骤树</button>
        <div id="treeResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试分页查询步骤</h3>
        <input type="number" id="pageTaskId" placeholder="输入任务ID" value="1">
        <input type="number" id="pageNum" placeholder="页码" value="1">
        <input type="number" id="pageSize" placeholder="每页大小" value="10">
        <button onclick="testPageTaskSteps()">分页查询</button>
        <div id="pageResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试单个步骤查询</h3>
        <input type="number" id="stepId" placeholder="输入步骤ID" value="1">
        <button onclick="testGetTaskStepById()">获取步骤详情</button>
        <div id="stepResult" class="result"></div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080/api';
        
        async function testGetTaskStepsTree() {
            const taskId = document.getElementById('taskId').value;
            const resultDiv = document.getElementById('treeResult');
            
            try {
                resultDiv.innerHTML = '请求中...';
                const response = await fetch(`${API_BASE}/task-steps/tree?taskId=${taskId}`);
                const data = await response.json();
                
                if (response.ok) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = `
                        <strong>成功!</strong><br>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `
                        <strong>错误!</strong><br>
                        状态: ${response.status}<br>
                        响应: ${JSON.stringify(data, null, 2)}
                    `;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `
                    <strong>请求失败!</strong><br>
                    错误: ${error.message}
                `;
            }
        }
        
        async function testPageTaskSteps() {
            const taskId = document.getElementById('pageTaskId').value;
            const pageNum = document.getElementById('pageNum').value;
            const pageSize = document.getElementById('pageSize').value;
            const resultDiv = document.getElementById('pageResult');
            
            try {
                resultDiv.innerHTML = '请求中...';
                const response = await fetch(`${API_BASE}/task-steps/page?taskId=${taskId}&pageNum=${pageNum}&pageSize=${pageSize}`);
                const data = await response.json();
                
                if (response.ok) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = `
                        <strong>成功!</strong><br>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `
                        <strong>错误!</strong><br>
                        状态: ${response.status}<br>
                        响应: ${JSON.stringify(data, null, 2)}
                    `;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `
                    <strong>请求失败!</strong><br>
                    错误: ${error.message}
                `;
            }
        }
        
        async function testGetTaskStepById() {
            const stepId = document.getElementById('stepId').value;
            const resultDiv = document.getElementById('stepResult');
            
            try {
                resultDiv.innerHTML = '请求中...';
                const response = await fetch(`${API_BASE}/task-steps/${stepId}`);
                const data = await response.json();
                
                if (response.ok) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = `
                        <strong>成功!</strong><br>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                    </pre>
                    </div>
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `
                        <strong>错误!</strong><br>
                        状态: ${response.status}<br>
                        响应: ${JSON.stringify(data, null, 2)}
                    `;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `
                    <strong>请求失败!</strong><br>
                    错误: ${error.message}
                `;
            }
        }
    </script>
</body>
</html> 